<template>
  <!-- 首页 -->
  <div class="home-page">
    <div>
      <!-- 导航栏 -->
      <div class="top-nav">
        <div class="top-nav-c clearfix">
          <div class="top-nav-c-left">
            <span>欢迎来到聚美！</span>
            <a href>请登录</a>
            <a href>快速注册</a>
          </div>
          <div class="top-nav-c-right">
            <a href>正品保证</a>
            <a href>订单查询</a>
            <img src="../../public/images/小心.png" alt />
            <a href>收藏的品牌</a>
            <a href>
              我的聚美
              <img src="../../public/images/箭头.png" alt class="jian" />
            </a>
            <a href class="phone" style="color:red">
              <img src="../../public/images/手机.png" alt class="iphone" />
              手机聚美
            </a>
            <a href>
              更多
              <img src="../../public/images/箭头.png" alt class="jian" />
            </a>
          </div>
        </div>
      </div>
      <!-- 搜索部分 -->
      <div class="top-search">
        <div class="top-search-c">
          <div class="top-search-c-l"></div>
          <div class="top-search-c-c">
            <input type="search" />
            <div class="search-btn">
              <p>搜索</p>
            </div>
            <a href>保湿</a>
            <span>|</span>
            <a href>面膜</a>
            <span>|</span>
            <a href>洗面奶</a>
            <span>|</span>
            <a href>补水</a>
            <span>|</span>
            <a href>香水</a>
            <span>|</span>
            <a href>眼霜</a>
            <span>|</span>
            <a href>口红</a>
            <span>|</span>
            <a href>护肤套装</a>
            <span>|</span>
            <a href>BB霜</a>
          </div>
          <div class="top-search-c-r">
            <!-- 加入购物车按钮 -->
            <a href>
              <img src="../../public/images/cart.gif" alt />
              <span>
                去购物车结算
                <img src="../../public/images/箭头.png" alt />
              </span>
            </a>
          </div>
        </div>
      </div>
      <!-- 分类导航 -->
      <div class="categrouies-nav">
        <div class="categrouies-nav-c">
          <ui>
            <li class="li-first">
              <a href>首页</a>
            </li>
            <li>
              <a href>急速免税店</a>
            </li>
            <li>
              <a href>母婴特卖</a>
            </li>
            <li>
              <a href>
                美妆商城
                <img src="../../public/images/箭头.png" alt />
              </a>
            </li>
            <li>
              <a href>国际轻奢</a>
            </li>
            <li>
              <a href>服装运动</a>
            </li>
            <li>
              <a href>鞋包配饰</a>
            </li>
          </ui>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>
s

<style>
.top-nav {
  width: 100%;
  height: 28px;
  border-bottom: 1px solid rgb(229, 229, 229);
  background: rgb(242, 242, 242);
}
.top-nav-c {
  overflow: hidden;
  width: 1090px;
  height: 100%;
  margin: 0 auto;
}
.top-nav-c span {
  font-size: 13px;
  color: #8b8b8b;
}
.top-nav-c a {
  font-size: 12px;
}
.top-nav-c a:hover {
  color: red;
}
.top-nav-c-left {
  display: inline-block;
}
.top-nav-c-left a {
  color: rgb(108, 108, 108);
  margin-left: 15px;
}
.top-nav-c-right {
  float: right;
}
.top-nav-c-right a {
  color: #a9a9a9;
  margin-right: 20px;
}
.phone {
  display: inline-block;
  height: 22px;
  width: 80px;
  line-height: 10px;
  border-left: 1px solid #a9a9a9;
  border-right: 1px solid #a9a9a9;
}
.iphone {
  position: relative;
  top: 3px;
  left: 3px;
}

/* 搜索部分 */
.top-search {
  width: 100%;
  height: 100%;
}

.top-search-c {
  width: 1090px;
  height: 110px;
  /* background-color: skyblue; */
  margin: 0 auto;
}

.top-search-c-l {
  display: inline-block;
  position: relative;
  bottom: -12px;
  width: 165px;
  height: 85px;
  background-image: url("../assets/images/logo_new_v1.jpg");
}

.top-search-c-c {
  position: relative;
  bottom: -6px;
  display: inline-block;
  width: 555px;
  height: 70px;
  /* background-color: black; */
  margin-left: 124px;
}

.top-search-c-c input {
  height: 40px;
  padding: 7px 5px;
  border: solid #ed145b;
  border-width: 3px 0 3px 3px;
  font-size: 15px;
  color: #999;
  outline: 0 none;
  width: 456px;
}
.search-btn {
  position: relative;
  top: 7px;
  display: inline-block;
  color: white;
  height: 40px;
  width: 98px;
  background-color: #ed145b;
  text-align: center;
  cursor: pointer;
}
.search-btn p {
  position: relative;
  top: -7px;
}

.top-search-c-c a {
  color: #a9a9a9;
  font-size: 13px;
}
.top-search-c-c a:hover {
  color: red;
}
.top-search-c-c span {
  color: #a9a9a9;
  font-size: 13px;
  margin-left: 6px;
  margin-right: 6px;
}

.top-search-c-r {
  position: relative;
  right: -103px;
  top: -15px;
  display: inline-block;
  width: 140px;
  height: 32px;
  border: 1px solid #e5e5e5;
  position: relative;
  background: #f8f8f8;
  z-index: 2;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.top-search-c-r:hover {
  background: #fff;
}
.top-search-c-r span {
  position: relative;
  top: -8px;
  left: 13px;
  color: #7f7f7f;
  font-size: 12px;
}
.top-search-c-r span:hover {
  color: red;
}

/* 分类导航 */
.categrouies-nav {
  width: 100%;
  height: 38px;
  background-color: black;
}
.categrouies-nav-c {
  width: 1090px;
  height: 100%;
  margin: 0 auto;
}
.categrouies-nav-c li {
  display: inline-block;
  height: 100%;
  width: 110px;
  line-height: 36px;
  text-align: center;
}
.categrouies-nav-c li a {
  color: white;
  font-size: 14px;
}
.categrouies-nav-c li a:hover {
  color: #a0a0a0;
}
.li-first {
  height: 100%;
  background-color: #ed145b;
}
</style>
